Frontend Monorepo: Lerna og Nx Workspace Management

I det konstant udviklende landskab af frontend-udvikling kan det være en betydelig udfordring at administrere store og komplekse projekter. Traditionelle multi-repo-opsætninger, der giver isolation, kan føre til kode-duplikering, hovedpine ved afhængighedsstyring og inkonsekvent værktøjsbrug. Det er her, monorepo-arkitekturen skinner. Et monorepo er et enkelt lager, der indeholder flere projekter, ofte relaterede, der er bygget og versionsstyret sammen. Denne tilgang giver mange fordele, men effektiv styring af et monorepo kræver specialiserede værktøjer. Denne artikel udforsker to populære løsninger: Lerna og Nx.

Hvad er et Monorepo?

Et monorepo er et versionsstyringssystem-lager, der indeholder kode til mange projekter. Disse projekter kan være relaterede eller fuldstændigt uafhængige. Nøglen er, at de deler det samme lager. Virksomheder som Google, Facebook, Microsoft og Uber har med succes adopteret monorepos til at administrere deres massive kodebaser. Tænk på, at Google gemmer næsten al deres kode, inklusive Android, Chrome og Gmail, i et enkelt lager.

Fordele ved et Monorepo

• Kodedeling og Genbrug: Del nemt kode mellem projekter uden komplekse pakke- og publiceringsarbejdsgange. Forestil dig et designsystembibliotek, der problemfrit kan integreres i flere applikationer i det samme lager.
• Forenklet Afhængighedsstyring: Administrer afhængigheder på ét sted, hvilket sikrer konsistens på tværs af alle projekter. Opdatering af et delt biblioteks afhængighed opdaterer automatisk alle projekter, der er afhængige af det.
• Atomiske Ændringer: Foretag ændringer, der spænder over flere projekter i et enkelt commit, hvilket sikrer konsistens og forenkler test. For eksempel kan en refactoring, der påvirker både frontend og backend, udføres atomisk.
• Forbedret Samarbejde: Teams kan nemt samarbejde om forskellige projekter i det samme lager, hvilket fremmer videndeling og tværfunktionel udvikling. Udviklere kan nemt gennemse og forstå kode på tværs af forskellige teams.
• Konsistent Værktøjsbrug og Praksis: Håndhæv konsistente kodestandarder, linting-regler og build-processer på tværs af alle projekter. Dette forbedrer kodekvaliteten og vedligeholdelsen.
• Forenklet Refactoring: Store refactoring-projekter forenkles, da al relateret kode er i det samme lager. Automatiserede refactoring-værktøjer kan bruges på tværs af hele kodebasen.

Udfordringer ved et Monorepo

• Lagerstørrelse: Monorepos kan blive meget store, hvilket potentielt kan sænke kloning og indekseringsoperationer. Værktøjer som `git sparse-checkout` og `partial clone` kan hjælpe med at afbøde dette problem.
• Build-tider: Opbygning af hele monorepoet kan være tidskrævende, især for store projekter. Værktøjer som Lerna og Nx tilbyder optimerede build-processer for at løse dette.
• Adgangskontrol: Begrænsning af adgangen til specifikke dele af monorepoet kan være kompleks. Omhyggelig planlægning og implementering af adgangskontrolmekanismer er påkrævet.
• Værktøjskompleksitet: Opsætning og administration af et monorepo kræver specialiserede værktøjer og viden. Indlæringskurven kan være stejl i starten.

Lerna: Administration af JavaScript-projekter i et Monorepo

Lerna er et populært værktøj til administration af JavaScript-projekter i et monorepo. Det optimerer arbejdsgangen omkring administration af multi-pakke-lagre med Git og npm. Det er især velegnet til projekter, der bruger npm eller Yarn til afhængighedsstyring.

Nøglefunktioner i Lerna

• Versionsstyring: Lerna kan automatisk versionsstyre og publicere pakker baseret på ændringer foretaget siden den sidste udgivelse. Det bruger konventionelle commits til at bestemme det næste versionsnummer.
• Afhængighedsstyring: Lerna håndterer inter-pakke-afhængigheder og sikrer, at pakker i monorepoet kan være afhængige af hinanden. Det bruger symlinking til at oprette lokale afhængigheder.
• Opgaveudførelse: Lerna kan udføre kommandoer på tværs af flere pakker parallelt, hvilket fremskynder build- og testprocesser. Det understøtter kørsel af scripts defineret i `package.json`.
• Ændringsdetektion: Lerna kan registrere, hvilke pakker der er ændret siden den sidste udgivelse, hvilket giver mulighed for målrettede builds og implementeringer.

Lerna Brugseksempel

Lad os illustrere Lernas brug med et forenklet eksempel. Antag, at vi har et monorepo med to pakker: `package-a` og `package-b`. `package-b` er afhængig af `package-a`.

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. Initialiser Lerna:

lerna init

Dette opretter `lerna.json` og opdaterer roden `package.json`. Filen `lerna.json` konfigurerer Lernas adfærd.

2. Installer Afhængigheder:

npm install
# or
yarn install

Dette installerer afhængigheder for alle pakker i monorepoet, baseret på filerne `package.json` i hver pakke.

3. Kør en Kommando På Tværs af Pakker:

lerna run test

Dette udfører `test`-scriptet, der er defineret i filerne `package.json` for alle pakker, der har det defineret.

4. Publicer Pakker:

lerna publish

Denne kommando analyserer commit-historikken, bestemmer hvilke pakker der er ændret, øger deres versioner baseret på konventionelle commits og publicerer dem til npm (eller dit valgte register).

Lerna Konfiguration

Filen `lerna.json` er hjertet i Lernas konfiguration. Det giver dig mulighed for at tilpasse Lernas adfærd, såsom:

• `packages`: Angiver placeringen af pakkerne i monorepoet. Ofte sat til `["packages/*"]`.
• `version`: Angiver versioneringsstrategien. Kan være `independent` (hver pakke har sin egen version) eller en fast version.
• `command`: Giver dig mulighed for at konfigurere indstillinger for specifikke Lerna-kommandoer, såsom `publish` og `run`.

Eksempel `lerna.json`:

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx: Smart, Hurtigt og Udvidbart Build-system

Nx er et kraftfuldt build-system, der giver avancerede funktioner til monorepo-administration. Det fokuserer på inkrementelle builds, beregningscaching og opgaveorkestrering for markant at forbedre build-tider og udviklerproduktivitet. Mens Lerna primært er fokuseret på administration af pakker, giver Nx en mere omfattende tilgang til administration af hele monorepo-arbejdsgangen, herunder kodegenerering, linting, test og implementering.

Nøglefunktioner i Nx

• Inkrementelle Builds: Nx analyserer afhængighedsgrafen for dine projekter og genopbygger kun de projekter, der er ændret siden det sidste build. Dette reducerer build-tiderne dramatisk.
• Beregningscaching: Nx gemmer resultaterne af opgaver, såsom builds og tests, så de kan genbruges, hvis inputtene ikke er ændret. Dette fremskynder udviklingscyklusserne yderligere.
• Opgaveorkestrering: Nx giver et kraftfuldt opgaveorkestreringssystem, der giver dig mulighed for at definere komplekse build-pipelines og udføre dem effektivt.
• Kodegenerering: Nx giver kodegenereringsværktøjer, der kan hjælpe dig med hurtigt at oprette nye projekter, komponenter og moduler, der følger bedste praksis og konsistente standarder.
• Plugin-økosystem: Nx har et rigt plugin-økosystem, der understøtter forskellige teknologier og frameworks, såsom React, Angular, Node.js, NestJS og mere.
• Visualisering af Afhængighedsgraf: Nx kan visualisere afhængighedsgrafen for dit monorepo, hvilket hjælper dig med at forstå forholdet mellem projekter og identificere potentielle problemer.
• Påvirkede Kommandoer: Nx giver kommandoer til kun at køre opgaver på de projekter, der er påvirket af en specifik ændring. Dette giver dig mulighed for at fokusere din indsats på de områder, der har brug for opmærksomhed.

Nx Brugseksempel

Lad os illustrere Nxs brug med et forenklet eksempel. Vi opretter et monorepo med en React-applikation og et Node.js-bibliotek.

1. Installer Nx CLI Globalt:

npm install -g create-nx-workspace

2. Opret et Nyt Nx Workspace:

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

Dette opretter et nyt Nx-workspace med en React-applikation. Indstillingen `--preset=react` fortæller Nx, at initialisere workspacet med React-specifikke konfigurationer.

3. Generer et Bibliotek:

nx generate @nrwl/node:library my-library

Dette genererer et nyt Node.js-bibliotek kaldet `my-library`. Nx konfigurerer automatisk biblioteket og dets afhængigheder.

4. Byg Applikationen:

nx build my-app

Dette bygger React-applikationen. Nx analyserer afhængighedsgrafen og genopbygger kun de nødvendige filer.

5. Kør Tests:

nx test my-app

Dette kører enhedstests for React-applikationen. Nx gemmer testresultaterne i cache for at fremskynde efterfølgende testkørsler.

6. Se Afhængighedsgrafen:

nx graph

Dette åbner en webgrænseflade, der visualiserer afhængighedsgrafen for monorepoet.

Nx Konfiguration

Nx konfigureres via filen `nx.json`, som er placeret i roden af workspacet. Denne fil definerer projekterne i workspacet, deres afhængigheder og de opgaver, der kan udføres på dem.

Nøglekonfigurationsindstillinger i `nx.json` inkluderer:

• `projects`: Definerer projekterne i workspacet og deres konfiguration, såsom deres rodmappe og build-mål.
• `tasksRunnerOptions`: Konfigurerer opgavekøreren, som er ansvarlig for at udføre opgaver og cache deres resultater.
• `affected`: Konfigurerer, hvordan Nx bestemmer, hvilke projekter der er påvirket af en ændring.

Eksempel `nx.json`:

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "...",
        "canTrackAnalytics": false,
        "showUsageWarnings": false
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "default"],
      "outputs": ["{projectRoot}/dist"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "component": {
        "style": "css"
      }
    },
  }
}

Lerna vs. Nx: Hvilken Skal Man Vælge?

Både Lerna og Nx er fremragende værktøjer til administration af frontend-monorepos, men de imødekommer lidt forskellige behov. Her er en sammenligning for at hjælpe dig med at vælge den rigtige til dit projekt:

Funktion	Lerna	Nx
Fokus	Pakkestyring	Build-system og Opgaveorkestrering
Inkrementelle Builds	Begrænset (kræver eksterne værktøjer)	Indbygget og stærkt optimeret
Beregningscaching	Nej	Ja
Kodegenerering	Nej	Ja
Plugin-økosystem	Begrænset	Omfattende
Indlæringskurve	Lavere	Højere
Kompleksitet	Simpel	Mere Kompleks
Brugseksempler	Projekter primært fokuseret på administration og publicering af npm-pakker.	Store og komplekse projekter, der kræver optimerede build-tider, kodegenerering og et omfattende build-system.

Vælg Lerna hvis:

• Du primært har brug for at administrere og publicere npm-pakker.
• Dit projekt er relativt lille til mellemstort.
• Du foretrækker et enklere værktøj med en lavere indlæringskurve.
• Du allerede er fortrolig med npm og Yarn.

Vælg Nx hvis:

• Du har brug for optimerede build-tider og inkrementelle builds.
• Du ønsker kodegenereringsmuligheder.
• Du har brug for et omfattende build-system med opgaveorkestrering.
• Dit projekt er stort og komplekst.
• Du er villig til at investere tid i at lære et mere kraftfuldt værktøj.

Kan du bruge Lerna med Nx?

Ja, Lerna og Nx kan bruges sammen. Denne kombination giver dig mulighed for at udnytte Lernas pakkeadministrationsfunktioner, mens du drager fordel af Nxs optimerede build-system og opgaveorkestrering. Nx kan konfigureres som en opgavekører til Lerna, hvilket giver inkrementelle builds og beregningscaching til Lerna-administrerede pakker.

Bedste Praksis for Frontend Monorepo Management

Uanset om du vælger Lerna eller Nx, er det afgørende at følge bedste praksis for at administrere et frontend-monorepo med succes:

• Etabler Klar Projektstruktur: Organiser dine projekter logisk og konsekvent. Brug en klar navnekonvention for pakker og biblioteker.
• Håndhæv Konsistente Kodestandarder: Brug linters og formateringsværktøjer til at sikre konsistent kodestil på tværs af alle projekter. Værktøjer som ESLint og Prettier kan integreres i din arbejdsgang.
• Automatiser Build- og Testprocesser: Brug CI/CD-pipelines til at automatisere build-, test- og implementeringsprocesser. Værktøjer som Jenkins, CircleCI og GitHub Actions kan bruges.
• Implementer Kode-gennemgange: Udfør grundige kode-gennemgange for at sikre kodekvalitet og vedligeholdelse. Brug pull requests og kode-gennemgangsværktøjer.
• Overvåg Build-tider og Ydeevne: Spor build-tider og ydeevnemålinger for at identificere flaskehalse og områder, der kan forbedres. Nx giver værktøjer til at analysere build-ydeevne.
• Dokumenter Din Monorepo-struktur og Processer: Opret klar dokumentation, der forklarer strukturen af dit monorepo, de værktøjer og teknologier, der bruges, og udviklingsarbejdsgangene.
• Anvend Konventionelle Commits: Brug konventionelle commits til at automatisere versionsstyrings- og frigivelsesprocesser. Lerna understøtter konventionelle commits ud af boksen.

Konklusion

Frontend-monorepos giver betydelige fordele ved administration af store og komplekse projekter, herunder kodedeling, forenklet afhængighedsstyring og forbedret samarbejde. Lerna og Nx er kraftfulde værktøjer, der kan hjælpe dig med effektivt at administrere et frontend-monorepo. Lerna er et godt valg til administration af npm-pakker, mens Nx giver et mere omfattende build-system med avancerede funktioner som inkrementelle builds og kodegenerering. Ved omhyggeligt at overveje dit projekts behov og følge bedste praksis kan du med succes adoptere et frontend-monorepo og høste dets fordele.

Husk at overveje faktorer som dit teams erfaring, projektkompleksitet og ydeevnekrav, når du vælger mellem Lerna og Nx. Eksperimenter med begge værktøjer og find det, der bedst passer til dine specifikke behov.

Held og lykke med din monorejo-rejse!